{% extends "user/base.html" %}

{% block user_content %}
<div class="container mt-5">
    <div class="container border rounded w-50 justify-content-center align-items-center pt-3 pb-3 shadow">

        <div class="container d-grid gap-2">
            <div class="row justify-content-md-center p-1 state initstate waitstate d-none">
                <div class="col-md-auto">快充前方剩余人数：</div>
                <div class="col-md-auto f-queue border rounded"></div>
                <div class="col-md-auto">人</div>
            </div>
            <div class="row justify-content-md-center p-1 state initstate waitstate d-none">
                <div class="col-md-auto">慢充前方剩余人数：</div>
                <div class="col-md-auto t-queue border rounded"></div>
                <div class="col-md-auto">人</div>
            </div>
            <div class="row justify-content-md-center p-1 state cwaitstate d-none">
                已进入充电区等候，不允许修改充电请求
            </div>
            <div class="row justify-content-md-center p-1 state readystate d-none">
                <div class="col-md-auto">确认剩余时间：</div>
                <div class="col-md-auto readytimer border rounded"></div>
                <div class="col-md-auto">秒</div>
            </div>
            <div class="row justify-content-md-center p-1">
                <div class="col-md-auto">您的队列号：</div>
                <div class="col-md-auto queue-number border rounded"></div>
            </div>
            <div class="row justify-content-md-center p-1 state cwaitstate readystate chargestate d-none">
                <div class="col-md-auto">充电桩号码:</div>
                <div class="col-md-auto pile-number border rounded"></div>
            </div>
            <div class="row justify-content-md-center p-1 state chargestate d-none">
                <div class="col-md-auto">预计充电剩余时间：</div>
                <div class="col-md-auto chargetimer border rounded"></div>
                <div class="col-md-auto">min</div>
            </div>
        </div>

        <div class="d-grid pt-3 gap-2 col-6 mx-auto">
            <button class="btn btn-primary state initstate d-none" type="button" data-bs-toggle="modal"
                data-bs-target="#queueModal">叫号</button>
            <button class="btn btn-primary state waitstate cwaitstate d-none" type="button" id="change-request"
                data-bs-toggle="modal" data-bs-target="#changeModal">修改充电请求</button>
            <button class="btn btn-outline-danger state waitstate cwaitstate d-none" type="button"
                id="cancel-charge">取消充电</button>
            <button class="btn btn-primary state readystate d-none" type="button" id="start-charge">开始充电</button>
            <button class="btn btn-outline-danger state readystate d-none" type="button"
                id="cancel-charge">取消充电</button>
            <button class="btn btn-outline-danger state chargestate d-none" type="button" id="stop-charge">停止充电</button>
        </div>
    </div>
</div>
<!-- get queue modal -->
<div class="modal fade" id="queueModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">充电请求</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form class="needs-validation" id="get-queue-form" novalidate>
                    <!-- change charge model -->
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-3 pt-0">充电模式</legend>
                        <div class="col-sm-9">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="chargemode" id="f-charge" value="F"
                                    required>
                                <label class="form-check-label" for="f-charge">
                                    快充
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="chargemode" id="t-charge" value="T"
                                    required>
                                <label class="form-check-label" for="t-charge">
                                    慢充
                                </label>
                                <div class="invalid-feedback">请选择充电模式</div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="row mb-3">
                        <label for="total-quantity" class="col-sm-2 col-form-label">总容量</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="total-quantity" placeholder="请输入1-100的整数"
                                min="1" max="100" oninput="setMax(this)" required>
                            <div class="invalid-feedback">请输入1-100的整数</div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="charge-quantity" class="col-sm-2 col-form-label">充电量</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="charge-quantity" placeholder="请输入1-100的整数"
                                min="1" max="100" required>
                            <div class="invalid-feedback">请输入1-总容量的整数</div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary" id="getqueue">确认</button>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>

<!-- change request modal -->
<div class="modal fade" id="changeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改充电请求</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form class="needs-validation" id="change-request-form" novalidate>
                    <!-- change charge model -->
                    <fieldset class="row mb-3">
                        <legend class="col-form-label col-sm-3 pt-0">充电模式</legend>
                        <div class="col-sm-9">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="chargemode" id="f-charge" value="F"
                                    required>
                                <label class="form-check-label" for="f-charge">
                                    快充
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="chargemode" id="t-charge" value="T"
                                    required>
                                <label class="form-check-label" for="t-charge">
                                    慢充
                                </label>
                                <div class="invalid-feedback">请选择充电模式</div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="row mb-3">
                        <label for="total-quantity" class="col-sm-2 col-form-label">总容量</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="total-quantity" min="1" max="100" disabled
                                required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="charge-quantity" class="col-sm-2 col-form-label">充电量</label>
                        <div class="col-sm-10">
                            <input type="number" class="form-control" id="charge-quantity" placeholder="请输入1-100的整数"
                                min="1" max="100" required>
                            <div class="invalid-feedback">请输入1-总容量的整数</div>
                        </div>
                    </div>
                    <p class="text-start fw-semibold">注意：修改充电模式需要重新叫号排队</p>
                    <button type="submit" class="btn btn-primary">确认</button>
                </form>

            </div>
        </div>
    </div>
</div>

<script>
    function setMax(elem) {
        document.querySelectorAll('#charge-quantity').forEach(input => { input.max = elem.value; })
    }

</script>

<script src="{{ url_for('static', filename='scripts/user.js') }}" async></script>

{% endblock %}